<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <div class="hs-screen-row">
        <Input v-model="params.goodsName" placeholder="商品名称" clearable style="width: 200px" />
      </div>

      <div class="hs-screen-row">
        <Select v-model="params.isKsUpShelf" placeholder="上架状态" clearable style="width:200px">
          <Option value="">全部</Option>
          <Option value="0">下架</Option>
          <Option value="1">上架</Option>
          <Option value="2">待上架</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <DatePicker @on-change="changeDate" v-model="dateInit" type="daterange" :editable="false" separator=" ~ "
          split-panels transfer placeholder="创建时间" style="width: 200px"></DatePicker>
      </div>
      <div class="hs-screen-row">
        <Button type="primary" @click="findList">查询</Button>
      </div>
      <div class="hs-screen-row">
        <Button @click="resetScreen">重置</Button>
      </div>
    </Card>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>商品列表</div>
          <div>
            <ButtonGroup>
              <Button @click="findList">
                <Icon type="md-refresh" size="15" />
              </Button>
              <Button @click="kuaishouOpeHandle(1)">新增商品</Button>
            </ButtonGroup>
          </div>
        </div>
      </div>

      <div style="margin-bottom: 10px">
        <Button type="dashed" @click="batchOpe(1)">批量上架</Button>
        <Button style="margin-left: 10px" type="dashed" @click="batchOpe(0)">
          批量下架
        </Button>
      </div>
      <!--表格数据-->
      <Table :columns="columns" :data="data" size="small" :stripe="true" :loading="isTableLoading"
        @on-select="selectTable" @on-select-cancel="selectCancelTable" @on-select-all="selectAllTable"
        @on-select-all-cancel="selectAllCancelTable">
        <template slot-scope="{ row, index }" slot="isKsUpShelf">
          <Tag color="default" v-if="row.isKsUpShelf === 0" size="default">
            下架
          </Tag>
          <Tag color="green" v-if="row.isKsUpShelf === 1" size="default">
            上架
          </Tag>
          <Tag color="volcano" v-if="row.isKsUpShelf === 2" size="default">
            待上架
          </Tag>
        </template>

        <template slot-scope="{ row }" slot="action">
          <Button type="success" size="small" style="margin-right: 5px" @click="kuaishouOpeHandle(3, row)">
            查看
          </Button>
          <Button type="primary" size="small" style="margin-right: 5px" @click="kuaishouOpeHandle(2, row)">
            编辑
          </Button>

          <Dropdown transfer trigger="click">
            <Button size="small">
              <Icon type="ios-more" size="22" />
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem v-if="row.isKsUpShelf === 0" @click.native="singleOpe(row)">
                上架
              </DropdownItem>
              <DropdownItem v-if="row.isKsUpShelf === 1" @click.native="singleOpe(row)">
                下架
              </DropdownItem>
              <DropdownItem v-if="row.isKsUpShelf === 2" @click.native="singleOpe(row)">
                上架
              </DropdownItem>

              <DropdownItem @click.native="isDelUser(row)">删除</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <!--分页-->
      <div class="hs-page">
        <Page :total="total" show-sizer show-total transfer @on-change="changePage"
          @on-page-size-change="changePageSize" />
      </div>
    </Card>
    <kuaishou-ope ref="kuaishouOpeRef" @changeDate="findList"></kuaishou-ope>
  </div>
</template>

<script>
import hsBreadcrumb from '@/components/hs-breadcrumb';
import kuaishouOpe from './components/kuaishou-ope.vue';

export default {
  data() {
    return {
      total: 0,
      dateInit: '',
      isTableLoading: false,
      // 参数
      params: {
        page: 1,
        rows: 10,
        goodsName: '',
        freightRule: '',
        goodsTypeName: '',
        goodsType: [],
        isKsUpShelf: '',
        startTime: '',
        endTime: '',
        isToKs: ''
      },
      // 商品上下架参数
      upAndDownParams: {
        goodsMallIdList: '',
        isKsUpShelf: ''
      },
      upGoodsParams: {},
      // 选中数据
      selectData: [],
      // 表格列
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '商品ID',
          minWidth: 120,
          key: 'goodsMallId'
        },
        {
          title: '商品名称',
          minWidth: 280,
          key: 'goodsName',
          ellipsis: true
        },
        {
          title: '状态',
          slot: 'isKsUpShelf',
          align: 'center',
          width: 120
        },
        {
          title: '创建时间',
          key: 'createTime',
          width: 150
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ],
      // 表格数据
      data: [],
      // 面包屑
      breadcrumb: [
        { name: '首页', url: '', icon: 'ios-home-outline', size: 18 },
        { name: '商品管理', url: '', icon: '', size: 0 },
        { name: '快手家政商品管理', url: '', icon: '', size: 0 }
      ]
    };
  },
  created() {
    // 商品-列表查询
    this.findList();
  },
  mounted() {
  },
  methods: {
    // 商品-列表查询
    findList() {
      this.isTableLoading = true;
      this.axios.post('/goodsMall/findList', { serviceCode: 'dj', ...this.params }).then(res => {
        this.isTableLoading = false;
        if (res.status == 200) {
          this.total = res.data.total;
          this.data = res.data.rows;
        }
        if (res.status == 201) {
          this.$Message.error(res.msg);
        }
        if (res.status == 500) {
          this.$Notice.error({
            title: '服务器内部错误',
            desc: '查询商品列表接口报错',
            duration: 0
          });
        }
      });
    },

    // 商品-上下架商品
    upShelfGoods() {
      this.axios
        .post('/goodsMall/ksUpShelfGoods', this.upAndDownParams)
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            this.$Message.success('操作成功.');
            this.findList();
          }
          if (res.status == 201) {
            this.$Message.error(res.msg);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '上下架商品接口报错',
              duration: 0
            });
          }
        });
    },
    // 是否删除商品
    isDelUser(row) {
      // console.log(row)
      this.$Modal.confirm({
        title: `是否删除商品${row.goodsName}?删除不影响已购买用户的权益。`,
        onOk: () => {
          // this.$Message.info('您点击了确定.');
          this.deleteGoods(row);
        },
        onCancel: () => {
          // this.$Message.info('您点击了取消.');
        }
      });
    },
    // 删除商品
    deleteGoods(row) {
      this.$Spin.show();
      this.axios
        .post('/goodsMall/deleteGoods', {
          goodsMallId: row.goodsMallId
        })
        .then(res => {
          console.log(res);
          setTimeout(() => {
            this.$Spin.hide();
          }, 300);
          if (res.status == 200) {
            this.$Message.success('操作成功.');
            this.findList();
          }
          if (res.status == 201) {
            // this.$Message.error(res.msg);
            this.$Notice.error({
              title: '删除商品失败',
              desc: res.msg
            });
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '删除商品接口报错',
              duration: 0
            });
          }
        });
    },
    // 选中商品
    selectGoodsType(value, selectedData) {
      if (selectedData.length) {
        this.params.goodsTypeName = selectedData[2].label;
      } else {
        this.params.goodsTypeName = '';
      }
    },
    // 显示操作模态框
    showGoodsOpe(type, row) {
      /**
       * type判断
       * 1.查看 2.新增 3.编辑
       */
    },
    // 日期条件赋值
    changeDate(e) {
      this.params.startTime = e[0];
      this.params.endTime = e[1];
    },
    // 重置筛选条件
    resetScreen() {
      this.params.goodsName = '';
      this.params.freightRule = '';
      this.params.goodsTypeName = '';
      this.params.goodsType = [];
      this.params.isKsUpShelf = '';
      this.params.startTime = '';
      this.params.endTime = '';
      this.dateInit = '';
    },
    // 改变页数
    changePage(e) {
      this.params.page = e;
      this.findList();
    },
    // 改变页容量
    changePageSize(e) {
      this.params.rows = e;
      this.findList();
    },
    // 在多选模式下有效，选中某一项时触发
    selectTable(selection, row) {
      this.selectData = selection;
    },
    // 在多选模式下有效，取消选中某一项时触发
    selectCancelTable(selection, row) {
      this.selectData = selection;
    },
    // 在多选模式下有效，点击全选时触发
    selectAllTable(selection) {
      this.selectData = selection;
    },
    // 在多选模式下有效，点击取消全选时触发
    selectAllCancelTable(selection) {
      this.selectData = selection;
    },
    kuaishouOpeHandle(type, row) {
      this.$refs.kuaishouOpeRef.show(type, row);
    },
    // 上下架商品
    singleOpe(row) {
      this.upAndDownParams.goodsMallIdList = row.goodsMallId;
      if (row.isKsUpShelf == 1) {
        this.upAndDownParams.isKsUpShelf = 2
      } else {
        this.upAndDownParams.isKsUpShelf = 1
      }


      this.upShelfGoods();
    },
    // 批量上下架商品
    batchOpe(type) {
      if (!this.selectData.length) {
        this.$Message.error('至少选择一个商品');
        return false;
      }
      let arr = [];
      this.selectData.forEach(v => {
        arr.push(v.goodsMallId);
      });
      this.upAndDownParams.goodsMallIdList = arr.join(',');
      this.upAndDownParams.isKsUpShelf = type
      this.$Modal.confirm({
        title: `确定${type == 0 ? '下架' : '上架'}选中的商品？`,
        onOk: () => {
          // this.$Message.info('您点击了确定.');
          this.upShelfGoods();
        },
        onCancel: () => {
          this.$Message.info('您点击了取消.');
        }
      });
    }
  },
  components: {
    hsBreadcrumb,
    kuaishouOpe
  }
};
</script>

<style scoped></style>
